<template>
  <div class=" publicBox" id="signalCSS">
    <div class="boxItem " id="publicSearch">      

<el-form ref="form" :inline="true"  class="demo-form-inline">
<el-row>
  <el-form-item label="IEMI号">
            <el-input class="pubIptB" v-model="ruleForm.imei"  placeholder="请输入模块IEMI"></el-input>
  </el-form-item>
    <el-form-item label="芯片型号" class="label_right">
            <el-input class="pubIptL" v-model="ruleForm.no"  placeholder="请输入模块芯片型号"></el-input>
  </el-form-item>
    <el-form-item label="适配终端" class="label_right">
            <el-input class="pubIptL" v-model="ruleForm.typeName"  placeholder="请输入模块适配终端"></el-input>
  </el-form-item >
  <el-form-item label="通信类型" :required="false" class="label_right" >
  <el-select v-model="ruleForm.commType" filterable  placeholder="全部" class="pubSlt97">
    <el-option
      v-for="item in deviceTyp"
      :key="item.id"
      :label="item.name"
      :value="item.id" 
      >
    </el-option>
  </el-select>
  </el-form-item>

 <el-form-item class="label_btn">
            <el-button class="pubBtnBlue" @click="getSignal" type="primary">查询</el-button>
  </el-form-item>
    </el-row>
<el-row  class="two_form publicBox">
    <el-row class="two_form_item">
    <el-form-item>
            <el-button class="pubBtnGree" @click="gotSignal" type="primary">新增</el-button>
    </el-form-item>
    <el-form-item>
                           <publicUpdate @successFn="successUpload" :hrefUpload="action"></publicUpdate>
    </el-form-item>

    <el-form-item label="">
        下载批量新增模板|<a href="#" @click="downXlsx" style="color:#617ADA">模块批量新增.xlsx</a>|
    </el-form-item>
    </el-row>
    <el-row  class="two_form_item_a">
        <el-form-item>
            <el-button class="pubBtnBlueL pubBtnBlueL_a" @click="exportFn" type="primary">导出</el-button>
        </el-form-item>
    </el-row>
    
</el-row>

</el-form>
</div>
          
          <public-table  
          @handleChange="handleChange"
          @changePage="changePage"
          :columnDefs="columnDefs" 
          :tableData="tableData" 
          :btn="['delete','enable']"
          :order=true></public-table>
  </div>
</template>

<script>
import publicTable from "@/components/public/publicTable.vue"
import publicUpdate from "@/components/public/publicUpdate.vue"
import * as API from '@api/equipmenter.js'
import * as pubAPI from '@api/public.js'
import  baseConfig from '@api/common/baseconfig.js'

export default {
  components: {
         publicTable,
         publicUpdate
  },
  data() {
    return {
        columnDefs :[
            {headerName: '芯片型号', field: 'no',width:120},
            {headerName: 'IMEI', field: 'imei',width:259},
            {headerName: '适配终端', field: 'typename',width:125},
            {headerName: '芯片供应商', field: 'suppliername',width:305},
            {headerName: '通信类型', field: 'commname',width:77},
            {headerName: '创建时间', field: 'createtime',width:120},
            {headerName: '当前状态', field: 'statusname',width:90}
        ],
        ruleForm:{
           page:1,
           size:100,
           imei:"",
           no:"",
           typeName:"",
           commType:'-1'
        },
        action:baseConfig.baseUrl+"/v1/flash/module/template/import",
        download:baseConfig.baseUrl+"/v1/flash/module/template/download",
        tableData: [],
        deviceTyp: [{
          id: '-1',
          name: '全部'
        }, {
          id: '0',
          name: '2G'
        }, {
          id: '1',
          name: '4G'
        }, {
          id: '2',
          name: '5G'
        },
        {
          id: '3',
          name: 'wifi'
        }],
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    async exportFn(){
        await API.exportSignal(this.ruleForm,baseConfig.baseUrl).then(res=>{
              pubAPI.creatExcelFn("通信板块管理.xlsx",res)
        })
    },
    successUpload(res){          //文件上传成功回调
        if(res.IsPositive){
                  this.$message.success({message:"文件上传成功"})
                  this.getSignal()
                }else{
                  this.$message.error({message:res.ErrorCode})
                }
    },
    changePage(pageSize,pageNum){
          this.ruleForm.size=pageSize;this.ruleForm.page=pageNum
          this.getSignal()
    },
    downXlsx(){
          window.location.href =this.download
    },
     async handleChange(index,row){   //状态改变
              if(index==1) row.status=2
              if(index==2) row.status=3
              await API.editSignal(row).then(res=>{
                if(res.IsPositive){
                  this.$message.success({message:"操作成功"})
                  this.getSignal()
                }else{
                  this.$message.error({message:res.ErrorCode})
                }
              })

    },
    gotSignal(){
            this.$router.push({path:"/platform/equipment/signalNewbuild"})
    },
    getSignal(){
             API.getSignal(this.ruleForm).then(res=>{
                if(res.IsPositive){
                  this.tableData=res.Data
                }else{
                  this.$message.error({message:res.ErrorCode})
                }
            })
    },

  },
  created() {
           this.getSignal()
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
@import "../../styles/less/public.less";
  #signalCSS{
    .boxItem{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .demo-form-inline{
        align-items: center;
      }
      .itemp{
      font-size: 16px;
      } 
      .label_right{
            margin-left: 28px;
        }
        .label_btn{
            margin-left: 42px;
        }
    }
    .two_form{
        display: block;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        .two_form_item{
            width: 1190px;
        }
        .two_form_item_a{
            width: 90px;
        }
    }
  }
</style>